特殊事件

接續昨天講的事件觸發hx-trigger，HTMX 也提供了一些特殊場景應用：

• load - 元素載入後觸發，只會觸發一次
• revealed - 滾動到元素出現在畫面（viewport）中時觸發，只會觸發一次
• intersect - 元素首次出現在畫面上時觸發，另外可以設定 root:<selector> 和 threshold:<float>，此功能對應的是 Web API - Intersection Observer API（https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）

輪詢(Polling)

Polling 是每隔一段時間就打 API 來同步資訊，HTMX 中使用 every 這個名稱。

基本用法：hx-trigger="every 間隔時間"，官方範例如下：

// 每隔兩秒發送 API 請求 GET /news
<div hx-get="/news" hx-trigger="every 2s"></div>

結合 load：hx-trigger="load 間隔時間"，此處的官方範例不是很明確，大致的理解是透過 load 加上延遲時間來觸發請求，請求的回應取得一個同樣包含 HTMX load 事件的內容，就可以像遞迴一樣不斷觸發。

標示(Indicators)

在 API 請求期間，可以把 htmx-indicator 這個 ClassName 設定在 loading 期間才會出現的元素上，這個元素的 opacity 會被設定為 0。

當 API 請求觸發，ClassName 會被換成「htmx-request」，opacity 變為 1，官方範例如下：

<button hx-get="/click">
    Click Me!
    <img class="htmx-indicator" src="/spinner.gif">
</button>

如果需要自定標示的 CSS 樣式，需要對「htmx-indicator」、「htmx-request」進行調整。

.htmx-indicator{
    display:none;
}
.htmx-request .my-indicator{
    display:inline;
}
.htmx-request.my-indicator{
    display:inline;
}

如果要指定套用 loading 效果的元素，可以使用 hx-indicator="CSS selector" 來指定。

<div>
    <button hx-get="/click" hx-indicator="#indicator">
        Click Me!
    </button>
    <img id="indicator" class="htmx-indicator" src="/spinner.gif"/>
</div>

參考來源：官方文件(https://htmx.org/docs/#trigger-filters)